<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot插槽分发内容</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
    我是父组件
    <my-child>
        <p>这里是父组件的内容</p>
        <p>这里是父组件的内容</p>
    </my-child>
    <!-- 父组件没有内容的， 显示子组件默认内容 -->
    <my-child></my-child>

    <!-- 根据slot的name制定父组件内容显示位置 -->
    <my-child2>
        <!-- 父组件内容顺序对子组件的显示顺序没有影响  -->
        <p slot="firstName">第一个</p>
        <p slot="lastName">最后一个</p>
        <p>默认位置</p>
    </my-child2>
</div>
<script>
    Vue.component("my-child", {
        template : '<div><p>这里是子组件的内容</p><slot>如果父组件没有传递内容，我是默认显示的</slot></div>'
    });
    Vue.component("my-child2", {
        template : '<div>' +
        '<p>这里是子组件2的内容</p>' +
        '<slot name="firstName"></slot>' +
        '<slot>如果父组件没有传递内容，我是默认显示的</slot>' +
        '<slot name="lastName"></slot>' +
        '</div>'
    });

    new Vue({
        el: "#app",
        data: {

        }
    })
</script>
</body>
</html>